<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .active {
            background-color: #ddd;
        }
    </style>
</head>
<body>
<!-- 宿主文件 -->
<div id="app">
    <h2 :title="title">
        <!-- 插值表达式！ -->
        {{title}}
    </h2>
    <!--        用户输入 -->
    <p>
        <input
                type="text"
                v-model="course"
                v-on:keydown.enter="addCourse"
        >
        <button @click="addCourse">新增！</button>
    </p>

<!--    列表组件 -->
    <course-list :courses="courses"></course-list>

    <!--    商品总数-->
    <p>
        <!--        表达式-->
        <!--        课程总数：{{courses.length + ' 门'}}-->
        <!--        使用计算属性的功能对上面的代码进行改进！-->
        <!--        课程总数：{{total}}-->

        <!--        也可以用监听器实现上面的功能！ -->
        课程总数：{{totalCount}}

    </p>
</div>

<script src="../js/vue.js"></script>
<script>
    // 课程列表组件
    Vue.component('course-list',{
        data() {
            return {
                selectedCourse: '',
            }
        },
        props: {
            courses: {
                type: Array,
                default: []
            }
        },
        template: `
          <div>
                      <!--    条件渲染-->
        <p v-if="courses.length == 0">没有任何课程信息！</p>

        <div class="course-list" v-else>
        <div
        :style="{backgroundColor: selectedCourse === c ? '#ddd' : 'transparent'}"
        @click="selectedCourse = c"
        v-for="c
            in courses"
        :key="c">
        <div>
        {{ c }}
        </div>
        </div>
        </div>
          </div>
        `
    })

    // 模拟异步数据调用
    function getCourses() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(['web全栈', 'web高级'])
            }, 2000)
        })
    }

    // 1、创建Vue的实例
    const app = new Vue({
        el: "#app",
        data() {
            return {
                title: '开课吧，购物车!',
                course: '',
                courses: [],
                totalCount: 0
            }
        },
        methods: {
            addCourse() {
                // 1、添加course到数组
                this.courses.push(this.course)
                // 2、清空course
                this.course = ''
            }
        },
        // 我们在写程序中用的比较多的两个钩子就是created and mounted
        async created() {
            // 进入这个生命周期函数：组件实例已创建，由于未挂载，dom不存在！
            const course = await getCourses()
            this.courses = course
        },
        mounted() {},
        computed: {
            total() {
                // 计算属性有缓存性：如果值没有发生变化，则页面不回重新渲染
                return this.courses.length + ' 门';
            }
        },
        // 默认情况下watch初始化时不执行
        // watch: {
        //     courses(newValue, oldValue) {
        //         this.totalCount = newValue.length + ' 门'
        //     }
        // },
        // 你如果想立马看到效果的话，就得用下面这个监听器！
        watch: {
            courses: {
                immediate: true,
                // deep: true,
                handler(newValue, oldValue) {
                    this.totalCount = newValue.length + ' 门'
                }
            }
        },
    })
</script>
</body>
</html>
